<template>
  <div class="kawaii-messages-container">
    <!-- 动态气泡背景 -->
    <div class="kawaii-bubbles">
      <div class="bubble bubble-1"></div>
      <div class="bubble bubble-2"></div>
      <div class="bubble bubble-3"></div>
      <div class="bubble bubble-4"></div>
      <div class="bubble bubble-5"></div>
      <div class="bubble bubble-6"></div>
    </div>

    <!-- 左侧导航区域 -->
    <div class="kawaii-sidebar">
      <div class="kawaii-menu-container">
        <div class="kawaii-title">
          <span class="kawaii-title-icon">✉️</span>
          消息中心
        </div>
        <div class="kawaii-menu">
          <div class="kawaii-menu-item" @click="goToPage('messages')">
            <div class="kawaii-menu-icon-container">
              <span class="kawaii-menu-icon">💌</span>
            </div>
            <span>我的消息</span>
            <div class="kawaii-menu-indicator"></div>
          </div>
          <div class="kawaii-menu-item" @click="goToPage('replies')">
            <div class="kawaii-menu-icon-container reply-icon">
              <span class="kawaii-menu-icon">💬</span>
            </div>
            <span>回复我的</span>
            <div class="kawaii-menu-indicator"></div>
          </div>
          <div class="kawaii-menu-item" @click="goToPage('likes')">
            <div class="kawaii-menu-icon-container like-icon">
              <span class="kawaii-menu-icon">❤️</span>
            </div>
            <span>收到的赞</span>
            <div class="kawaii-menu-indicator"></div>
          </div>
          <div class="kawaii-menu-item active" @click="goToPage('notify')">
            <div class="kawaii-menu-icon-container notify-icon">
              <span class="kawaii-menu-icon">🔔</span>
            </div>
            <span>系统通知</span>
            <div class="kawaii-menu-indicator"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="kawaii-notify-content">
      <div class="kawaii-notify-header">
        <div class="kawaii-title">
          <span class="kawaii-title-emoji">🔔</span>
          系统通知
        </div>
      </div>

      <div class="kawaii-notify-list">
        <div
          v-for="(notification, index) in notificationList"
          :key="index"
          class="kawaii-notify-item"
          :class="{ 'anime-pop-in': true }"
          :style="{ animationDelay: index * 0.1 + 's' }"
        >
          <div class="kawaii-notify-left">
            <div class="kawaii-notify-title">
              {{ notification.title }}
              <span class="kawaii-notify-time">{{ notification.time }}</span>
            </div>
            <div class="kawaii-notify-body">
              {{ notification.body }}
            </div>
            <div
              v-if="notification.links && notification.links.length > 0"
              class="kawaii-notify-links"
            >
              <a
                v-for="(link, linkIndex) in notification.links"
                :key="linkIndex"
                :href="link.url"
                class="kawaii-notify-link"
              >
                {{ link.text }}
              </a>
            </div>
          </div>
          <div class="kawaii-notify-icon" :class="'icon-' + (index % 5)">
            <span v-if="index % 5 === 0">🎬</span>
            <span v-else-if="index % 5 === 1">📊</span>
            <span v-else-if="index % 5 === 2">🏆</span>
            <span v-else-if="index % 5 === 3">🎵</span>
            <span v-else>🎮</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Message, Bell, Star, User as UserIcon } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

// 获取路由器实例
const router = useRouter()

// 页面跳转函数
const goToPage = (page: string) => {
  switch (page) {
    case 'messages':
      router.push('/user/messages')
      break
    case 'replies':
      router.push('/user/replies')
      break
    case 'likes':
      router.push('/user/likes')
      break
    case 'notify':
      router.push('/user/notify')
      break
  }
}

interface NotificationLink {
  text: string
  url: string
}

interface NotificationItem {
  title: string
  time: string
  body: string
  links?: NotificationLink[]
}

const notificationList = ref<NotificationItem[]>([
  {
    title: '炸-㍿! 收集新部动漫合集完结！',
    time: '2025年3月12日 12:01',
    body: '恭喜！你已收藏成功 "收集系列" 动漫 - 想继续追番吗？请点击"D"或',
    links: [{ text: '取消加载', url: '#' }],
  },
  {
    title: '你的B站2024年度报告来啦！',
    time: '2024年12月20日 20:00',
    body: '珍贵的回忆已经为你打包完毕！今年你观看了84.9多少天？谁成为了你的最爱？戴戴带回顾2024，吉祥UP主送来的福音祈愿 >>',
    links: [{ text: '网页链接', url: '#' }],
  },
  {
    title: '正在直播S14总决赛: BLG vs T1！',
    time: '2024年11月2日 21:00',
    body: 'BLG战队首度闯入S赛总决赛，时隔11年，全华班再次与T1在决赛舞台相遇，谁将加冕为王？11月2日22点，上局直播间看S14总决赛，无论好坏这不停，高能观赏团更是爆炸不断，25万现金红包等你拿抽！主直播间>>',
    links: [
      { text: '高能观赏团>>', url: '#' },
      { text: '网页链接', url: '#' },
    ],
  },
  {
    title: '《代号帧梦令•2024bilibili仙侠夜》全程回顾',
    time: '2024年9月11日 11:00',
    body: '霄渺天穹，仙侠盛宴！七夕歌会全程回顾已上线，等候千年情缘，一起共赏不刀仙侠宇宙',
    links: [
      { text: '链接:', url: '#' },
      { text: '网页链接', url: '#' },
    ],
  },
  {
    title: '《代号帧梦令•2024bilibili仙侠夜》正在直播！',
    time: '2024年8月10日 20:00',
    body: '七夕歌会现在开始！和墨云霄、杨宝生、卢禹铭，稳梦梦一起共赏仙侠宇宙！ >>去直播间',
    links: [
      { text: '链接:', url: '#' },
      { text: '网页链接', url: '#' },
    ],
  },
])
</script>

<style scoped>
.kawaii-messages-container {
  position: relative;
  width: 70%;
  margin: 20px auto;
  min-height: calc(100vh - 40px);
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(255, 182, 193, 0.3);
  display: flex;
  overflow: hidden;
  border: 2px solid rgba(255, 182, 193, 0.4);
  backdrop-filter: blur(10px);
  z-index: 1;
}

/* 动态气泡背景 */
.kawaii-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  filter: blur(8px);
  animation: float-bubble 15s infinite ease-in-out;
}

.bubble-1 {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #ffb7ef, #ff9ed5);
  top: 10%;
  left: 10%;
  animation-duration: 20s;
  animation-delay: 0s;
}

.bubble-2 {
  width: 120px;
  height: 120px;
  background: linear-gradient(45deg, #b5c9ff, #a2d0ff);
  top: 20%;
  right: 15%;
  animation-duration: 25s;
  animation-delay: 2s;
}

.bubble-3 {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #ffd1d9, #ffa8c9);
  bottom: 15%;
  left: 20%;
  animation-duration: 18s;
  animation-delay: 1s;
}

.bubble-4 {
  width: 150px;
  height: 150px;
  background: linear-gradient(45deg, #c5ebff, #c3d1ff);
  bottom: 20%;
  right: 10%;
  animation-duration: 22s;
  animation-delay: 3s;
}

.bubble-5 {
  width: 70px;
  height: 70px;
  background: linear-gradient(45deg, #ffe2c8, #ffc4ee);
  top: 50%;
  left: 30%;
  animation-duration: 19s;
  animation-delay: 2.5s;
}

.bubble-6 {
  width: 90px;
  height: 90px;
  background: linear-gradient(45deg, #c9fff0, #b5e9ff);
  top: 60%;
  right: 25%;
  animation-duration: 24s;
  animation-delay: 1.5s;
}

@keyframes float-bubble {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(5%, 10%) rotate(5deg);
  }

  50% {
    transform: translate(-5%, 15%) rotate(-5deg);
  }

  75% {
    transform: translate(10%, 5%) rotate(8deg);
  }
}

/* 左侧菜单 */
.kawaii-sidebar {
  width: 180px;
  background: linear-gradient(to bottom, #fff0f5, #fef9ff);
  border-right: 2px solid rgba(255, 182, 193, 0.4);
  position: relative;
  overflow: hidden;
}

.kawaii-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #ffcbe3, transparent);
}

.kawaii-menu-container {
  padding: 20px 0;
}

.kawaii-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #d15b7b;
  padding: 0 20px 15px;
  border-bottom: 2px solid #ffcbe3;
  position: relative;
  overflow: hidden;
}

.kawaii-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ffcbe3, #ff61d2, #ffcbe3);
  animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.kawaii-title-icon {
  margin-right: 8px;
  font-size: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.kawaii-menu {
  margin-top: 15px;
}

.kawaii-menu-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #7b5f7a;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 4px solid transparent;
  position: relative;
  margin-bottom: 4px;
}

.kawaii-menu-item:hover {
  background-color: #fff7fa;
  color: #d15b7b;
  border-left: 4px solid #ffcbe3;
  transform: translateX(2px);
}

.kawaii-menu-item.active {
  background-color: #fff0f5;
  color: #d15b7b;
  font-weight: 500;
  border-left: 4px solid #ff9fcf;
}

.kawaii-menu-icon-container {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffd1e3, #ffecf2);
  margin-right: 10px;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(255, 182, 193, 0.2);
}

.kawaii-menu-item:hover .kawaii-menu-icon-container {
  transform: rotate(5deg) scale(1.1);
}

.reply-icon {
  background: linear-gradient(135deg, #d1e4ff, #ecf2ff);
}

.like-icon {
  background: linear-gradient(135deg, #ffd1d1, #ffecec);
}

.notify-icon {
  background: linear-gradient(135deg, #fff9d1, #fffcec);
}

.kawaii-menu-icon {
  font-size: 16px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.kawaii-menu-indicator {
  position: absolute;
  right: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff61d2;
  opacity: 0;
  transition: all 0.3s;
}

.kawaii-menu-item:hover .kawaii-menu-indicator {
  opacity: 0.5;
}

.kawaii-menu-item.active .kawaii-menu-indicator {
  opacity: 1;
  box-shadow: 0 0 6px #ff61d2;
  animation: pulse 2s infinite;
}

/* 系统通知内容区域 */
.kawaii-notify-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.8);
}

.kawaii-notify-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.kawaii-notify-content::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #ffc5cc, #ff8c98);
  border-radius: 6px;
}

.kawaii-notify-content::-webkit-scrollbar-track {
  background: #fff0f0;
}

.kawaii-notify-header {
  padding: 20px;
  border-bottom: 2px solid #ffe0e0;
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  z-index: 2;
  box-shadow: 0 4px 10px -4px rgba(255, 143, 143, 0.15);
}

.kawaii-notify-header .kawaii-title {
  padding: 0;
  border-bottom: none;
}

.kawaii-notify-header .kawaii-title::after {
  display: none;
}

.kawaii-title-emoji {
  font-size: 24px;
  margin-right: 10px;
  animation: ring 2s infinite;
}

@keyframes ring {
  0%,
  100% {
    transform: rotate(0);
  }

  5%,
  15%,
  25% {
    transform: rotate(10deg);
  }

  10%,
  20%,
  30% {
    transform: rotate(-10deg);
  }

  35% {
    transform: rotate(0);
  }
}

.kawaii-notify-list {
  padding: 10px 20px;
}

.kawaii-notify-item {
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 16px;
  background-color: #fff0f5;
  display: flex;
  position: relative;
  box-shadow: 0 2px 8px rgba(255, 182, 193, 0.2);
  transition: all 0.3s;
  border-left: 3px solid #ff9fcf;
  overflow: hidden;
}

.anime-pop-in {
  animation: pop-in 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.kawaii-notify-item:hover {
  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.3);
  transform: translateY(-3px);
  border-color: #ff9fcf;
}

.kawaii-notify-left {
  flex: 1;
}

.kawaii-notify-title {
  font-size: 16px;
  font-weight: 600;
  color: #ff9fcf;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 40px;
}

.kawaii-notify-time {
  font-size: 13px;
  color: #ff8c98;
  font-weight: normal;
}

.kawaii-notify-body {
  font-size: 14px;
  color: #ff6b7a;
  line-height: 1.6;
  margin-bottom: 12px;
  background-color: #fff5f5;
  padding: 10px 15px;
  border-radius: 12px;
  border-left: 3px solid #ffc5cc;
  position: relative;
  overflow: hidden;
}

.kawaii-notify-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 197, 204, 0.1), transparent);
  transform: translateX(-100%);
  animation: shimmer-notify 3s infinite;
}

@keyframes shimmer-notify {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.kawaii-notify-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.kawaii-notify-link {
  font-size: 13px;
  color: #ff4d5e;
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 100px;
  background-color: #fff0f0;
  border: 1px solid #ffc5cc;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
}

.kawaii-notify-link::before {
  content: '🔗';
  font-size: 12px;
  margin-right: 5px;
}

.kawaii-notify-link:hover {
  background-color: #ffe0e0;
  color: #ff3040;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(255, 143, 143, 0.25);
  text-decoration: none;
}

.kawaii-notify-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s;
}

.icon-0 {
  background: linear-gradient(135deg, #ffcbd5, #ffecf2);
  box-shadow: 0 2px 8px rgba(255, 203, 213, 0.4);
}

.icon-1 {
  background: linear-gradient(135deg, #c5edff, #e0f5ff);
  box-shadow: 0 2px 8px rgba(197, 237, 255, 0.4);
}

.icon-2 {
  background: linear-gradient(135deg, #ffeabd, #fff5db);
  box-shadow: 0 2px 8px rgba(255, 234, 189, 0.4);
}

.icon-3 {
  background: linear-gradient(135deg, #e0d6ff, #f0eaff);
  box-shadow: 0 2px 8px rgba(224, 214, 255, 0.4);
}

.icon-4 {
  background: linear-gradient(135deg, #d8f8e8, #edfff5);
  box-shadow: 0 2px 8px rgba(216, 248, 232, 0.4);
}

.kawaii-notify-item:hover .kawaii-notify-icon {
  transform: rotate(15deg) scale(1.1);
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
  .kawaii-messages-container {
    width: 85%;
  }
}

@media screen and (max-width: 768px) {
  .kawaii-messages-container {
    width: 95%;
    flex-direction: column;
  }

  .kawaii-sidebar,
  .kawaii-notify-content {
    width: 100%;
  }

  .kawaii-notify-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .kawaii-notify-time {
    margin-top: 5px;
  }

  .kawaii-notify-icon {
    top: 10px;
    right: 10px;
  }
}
</style>
